<template>
	<span @click="check=!check;$emit('input',check);$emit('change',check);">
		<!-- 单击的时候发送input事件和v-model配置，change为了change监听 -->
		<span v-if="check" class="iconfont icon-duigouxiao" :style="{color:color,fontSize:size}"></span>
		<span v-else class="iconfont icon-checkboxweixuanzhongxiao" :style="{color:color,fontSize:size}"></span>
		<slot></slot>
	</span>
</template>

<script>
	export default {
		props: {
			// 大小
			size: {
				type: [String, Number],
				default: "14px"
			},
			// 颜色
			color: {
				type: String,
				default: "#f70"
			},
			// v-model 绑定的值
			value: {
				type: [Boolean, Number],
				default: true
			}
		},
		data() {
			return {
				// 默认选中与否
				check: this.value,
			}
		},
		watch:{
			"value":{
				handler(){
					this.check = this.value
				}
			}
		}
	}
</script>

<style>
</style>
